<template>
  <!--查看更多-->
  <div>
    <ul class="shaixuan">
      <li @click="toggle">{{cata}} <img src="../../assets/select.png" alt="" width="12"></li>
      <li>价格 <span class="up" :class="isOn?'on':''" @click="isOn=true,isActive=false,getOrderData(false)"></span>
        <span class="down" :class="isActive?'active':''" @click="isOn=false,isActive=true,getOrderData(true)"></span></li>
      <li @click="select()">{{categoryName}} <img src="../../assets/select.png" alt="" width="12"></li>
    </ul>
    <ul v-show="isShow" class="cataList">
      <li v-for="(item,index) in cataList" @click="check(item)">{{item}}</li>
    </ul>
    <ul v-show="isLook" class="cataList">
      <li v-for="(item,index) in categoryList" @click="change(item.categoryName,item.categoryId)">{{item.categoryName}}</li>
    </ul>
    <ul class="tuijianlist">
      <li v-for="item in goodsList" @click="goGoodsDetail(item.goodsId,item.categoryCode)">
        <img :src="item.coverImg | imgPathFilter" alt="" width="100%" height="165px" style="object-fit:cover">
        <div>
          <p>{{item.goodsName}}</p>
          <p>{{item.goodsPrice}}元</p>
        </div>
      </li>
    </ul>
    <p class="xiala" @click="goLoadMore(params)">下拉查看更多 <img src="../../assets/select.png" alt="" width="12"></p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getMoreGoodsList} from '../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'lookmore',
    props: {},
    data() {
      return {
        isShow: false,
        cata: '全部',
        cataList: ['全部', '最新'],
        isLook: false,
        categoryName: '分类',
        isActive: true,
        isOn: false,
        categoryList: [],
        pageData: {},
        goodsList: [],
        params: {page: 1, rows: 4}
      };
    },
    methods: {
      getOrderData(isActive){
        this.initOrderParams();
        this.goodsList = [];
        this.params.page = 1;
        this.params.rows = 4;
        this.getMoreGoodsListData(this.params);
      },
      toggle(){
        this.isShow = !this.isShow
      },
      check(item){
        this.cata = item;
        this.isShow = !this.isShow
      },
      select(){
        this.isLook = !this.isLook;
      },
      change(categoryName, categoryId){
        this.categoryName = categoryName;
        this.isLook = !this.isLook;
        this.goodsList = [];
        var params = {page: 1, rows: 4, categoryId: categoryId};
        this.params = params;
        this.initOrderParams();
        console.log(this.params);
        this.getMoreGoodsListData(this.params);
      },
      getMoreGoodsListData(params){
        var that = this;
        that.initOrderParams();
        getMoreGoodsList(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.categoryList = res.object.categoryList;
            that.pageData = res.object.pageData;
            if (that.pageData.pageCount > 0) {
              that.goodsList = that.goodsList.concat(that.pageData.rows);
            }
            console.log(that.goodsList);
          } else {
            Toast.fail(res.info)
          }
        })
      },
      goGoodsDetail(goodsId, categoryCode){
        if (categoryCode == 'vipcard_2' || categoryCode == 'vipcard_1') {
          this.$router.push({path: 'jinkadetail', query: {goodsId: goodsId}});
          return;
        }
        if (categoryCode == 'viproom') {
          this.$router.push({path: 'guibindetail', query: {goodsId: goodsId,entrySource:'shop'}});
          return;
        }
        if (categoryCode == 'viponly') {
          this.$router.push({path: 'tongdaodetail', query: {goodsId: goodsId,entrySource:'shop'}});
          return;
        }
        if (categoryCode == 'coupons') {
          this.$router.push({path: 'youhuiquan', query: {goodsId: goodsId}});
          return;
        }
        if (categoryCode == 'insurance') {
          this.$router.push({path: 'baozhangdetail', query: {goodsId: goodsId}});
          return;
        }
        this.$router.push({path: 'goodsdetail', query: {goodsId: goodsId}})
      },
      getSearchResult(){
        getMoreGoodsList(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.categoryList = res.object.categoryList;
            that.goodsList = res.object.pageData.rows;
            console.log(that.goodsList);
          } else {
            Toast.fail(res.info)
          }
        })
      },
      goLoadMore(params){
        this.params.page = params.page + 1;
        if (this.params.page > this.pageData.pages) {
          Toast.text("没有更多了")
        } else {
          this.getMoreGoodsListData(this.params);
        }
      },
      initOrderParams(){
        this.params['sort'] = 'goodsPrice';
        if (this.isActive) {
          this.params['order'] = 'desc'
        } else {
          this.params['order'] = 'asc'
        }
      }
    },
    created() {
      this.initOrderParams();
      this.getMoreGoodsListData(this.params);
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .cataList {
    position: absolute;
    width: 88%;
    top: 46px;
    left: 10px;
    right: 10px;
    text-align: left;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #fff;
    color: #111;
  }

  .shaixuan {
    display: flex;
    border-bottom: 1px solid #ddd;
    li {
      flex: 1;
      color: #999;
      padding: 10px 0;
      img {
        vertical-align: middle;
        margin-left: 5px;
      }
    }
    li:first-child {
      color: #111;
    }
    li:nth-child(2) {
      position: relative;
      .up, .down {
        width: 0;
        height: 0;
        border-width: 7px;
        border-style: solid;
        position: absolute;
        /*border-color:transparent transparent #eee;*/
      }
      .up {
        border-color: transparent transparent #eee;
        top: 14px;
        right: 25px;
      }
      .down {
        border-color: #eee transparent transparent;
        right: 12px;
        top: 20px
      }
      .on {
        border-color: transparent transparent #2f95f0;
      }
      .active {
        border-color: #2f95f0 transparent transparent;
      }
    }

  }

  .tuijianlist{
    text-align: left;
    padding: 10px 0 50px 10px;
    li{
      display: inline-block;
      width: calc(50% - 13px);
      font-size: 0;
      margin-bottom: 13px;
      margin-right: 10px;
      img{
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        height: 114px;
      }
      div{
        border:1px solid #eee;
        border-top:none;
        box-shadow: 0px 5px 15px -9px rgba(0,0,0,0.5);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-align: left;
        padding: 10px;
        p:first-child{
          font-size: 15px;
          color: #333;
        }
        p:last-child{
          font-size: 17px;
          color: #ff7f00;
        }
      }

    }
  }

  .xiala {
    font-size: 12px;
    color: #999;
    img {
      vertical-align: middle;
      margin-left: 5px;
    }
  }
</style>
